<template>
  <n-modal :show="dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 1000px">
      <mac-header
        :title="title"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <n-scrollbar style="max-height: 80vh">
          <div style="padding-left: 5px">
            <n-form ref="ruleForm" :model="queryForm" :rules="rules">
              <n-form-item label="标题" path="title">
                <n-input v-model:value="queryForm.title" />
              </n-form-item>
              <n-form-item label="唯一标识" path="key">
                <n-input v-model:value="queryForm.key" />
              </n-form-item>
              <n-form-item label="类型" path="type">
                <n-select
                  v-model:value="queryForm.type"
                  :options="SystemTypeEnum"
                  placeholder="请选择类型"
                />
              </n-form-item>
              <template v-if="queryForm.type === 'RICH'">
                <n-form-item label="内容" path="content">
                  <y-quil v-model="queryForm.content" />
                </n-form-item>
              </template>
              <template v-else>
                <n-form-item label="内容" path="content">
                  <n-input type="textarea" v-model:value="queryForm.content" />
                </n-form-item>
              </template>
              <n-form-item>
                <div class="tools w-full">
                  <n-button
                    type="primary"
                    attr-type="button"
                    @click="handleValidateClick"
                  >
                    <span>提交</span>
                  </n-button>
                </div>
              </n-form-item>
            </n-form>
          </div>
        </n-scrollbar>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useFullscreen } from '@vueuse/core'
import type { FormInst, FormRules, SelectOption } from 'naive-ui'
import {
  NButton,
  NModal,
  NForm,
  NFormItem,
  NScrollbar,
  NSelect,
  NInput
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { diaApi } from '@/hooks/addDialog'
import systemListApi from '@/service/api/operation/system'
import SystemTypeEnum from '@/enum/SystemTypeEnum'
import YQuil from '@/components/yang/YQuil.vue'
type PropsState = {
  classify: SelectOption[]
}
withDefaults(defineProps<PropsState>(), {
  classify: () => []
})
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const emit = defineEmits(['success'])
const ruleForm = ref<FormInst | null>(null)
const state = {
  ruleForm,
  apis: {
    doAdd: {
      api: systemListApi.add
    },
    doEdit: {
      api: systemListApi.add
    }
  },
  emit,
  queryForm: {
    title: '',
    key: '',
    type: '',
    content: ''
  }
}
const {
  dialogFormVisible,
  title,
  queryForm,
  open,
  close,
  handleValidateClick
} = diaApi(state)

const rules: FormRules = {
  title: [
    {
      required: true,
      message: '标题不能为空',
      trigger: 'blur'
    }
  ],
  key: [
    {
      required: true,
      message: '唯一标识不能为空',
      trigger: 'blur'
    }
  ],
  type: [
    {
      required: true,
      message: '类型不能为空',
      trigger: 'blur'
    }
  ],
  content: [
    {
      required: true,
      message: '内容不能为空',
      trigger: 'blur'
    }
  ]
}

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
